<style scoped>
.wraper {
    padding: 0 20px;
}

.search {
    padding-bottom: 20px;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}


.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}




.fixed-bottom{
    padding-left: 20px;
    padding-right: 20px;
    height: 80px;
    line-height: normal !important;
    position: fixed;
    left: 210px;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide{
    left: 75px;
}


/* 表格样式 start*/

.pro-card {
    margin-bottom: 10px;
}

.pro-card-head {
    background-color: #e6e7eb;
    line-height: 38px;
    border: 1px solid #ddd;
}

.pro-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}

.pro-card-headr {
    padding-right: 10px;
    text-align: right;
}

.pro-card-content {
    clear: both;
}

.pro-paramname {
    text-align: center;
    background-color: #e6e7eb;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
}

.pro-paramvalue {
    padding-left: 10px;
    border-right: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

.pro-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}






/* 表格样式  end */


/* 分页 start */

.page {
    margin:  0;
}

.ivu-page {
    padding-bottom: 150px;
}
.detail{
    margin-top: 30px;
}






/* 分页 end */
</style>
<style>
.a-link{
    color: #4074e1;
    text-decoration: underline;
    cursor: pointer;
    
}
</style>



<template>
    <div class="employee_marketing">
        <product-title></product-title>
        <div class="wraper">        
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang" >
                        快速搜索
                    </h3>
                        <Form  :model="searchForm" class="search-form">
                            <Col :xs="24" :sm="12" :md="12" :lg="8">
                                <Form-item>
                                    <Input size="large" type="text"  v-model="searchForm.name" placeholder="请输入员工姓名" />
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="8">
                                <Form-item>
                                    <Input size="large" type="text"  v-model="searchForm.job_code" placeholder="请输入员工工号" />
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="6">
                                <Form-item>
                                    <Select v-model="searchForm.sex" transfer placeholder="请选择性别">
                                        <Option  value="0">全部</Option>
                                        <Option  value="1">男</Option>
                                        <Option  value="2">女</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <!-- <Col :xs="24" :sm="12" :md="12" :lg="8">
                                <Form-item>
                                    <Select ref="orgselect" label-in-value :label="oname" filterable remote @on-change="orgchange($event)" :remote-method="oidremote" :loading="remoteloading" placeholder="请输入分支机构" v-model="searchForm.yun_org_mid" :transfer=true>
                                        <Option v-for="item in orglist" :value="item.value" :key="item.value">{{item.label}}</Option>                                                                                                                                       
                                    </Select>
                                </Form-item>
                            </Col> -->
                            <!-- <Col :xs="24" :sm="12" :md="12" :lg="4">
                                <Form-item>
                                    <Select v-model="searchForm.rank_id" transfer placeholder="请选择职级">
                                        <Option  value="0">全部</Option>
                                        <Option v-for="(value,key) in ranklist" :value="key">{{value}}</Option> 
                                    </Select>
                                </Form-item>
                            </Col> -->
                            <!-- <Col :xs="24" :sm="12" :md="12" :lg="4">
                                <Form-item>
                                    <Select v-model="searchForm.status" transfer placeholder="请选择状态">
                                        <Option  value="0">全部</Option>
                                        <Option  value="1">在职</Option>
                                        <Option  value="2">离职</Option>
                                        <Option  value="3">其他</Option>
                                    </Select>
                                </Form-item>
                            </Col> -->
                            <!-- <Col :xs="24" :sm="12" :md="12" :lg="6">
                                <Form-item>
                                    <Select v-model="searchForm.dept_id" transfer placeholder="请选择部门">
                                        <Option  value="0">全部</Option>
                                        <Option v-for="(value,key) in deptlist" :value="key">{{value}}</Option> 
                                    </Select>
                                </Form-item>
                            </Col> -->
                            <Col :xs="24" :sm="24" :md="24" :lg="2" >                               
                                <Button size="large"  class="fr" type="info" icon="ios-search" @click="search">搜索</Button>
                            </Col>
                            <div class="clear"></div>
                        </Form>
                        <!-- <Col span="24" class="table-action" >
                            <Button type="success" size="large" class="fr" icon="plus"  @click="createBtn">新增</Button>
                        </Col> -->
                </Row>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns1" :data="tablelist" class=""></Table>
                    </div>                        
                </div>
            </div>
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Row class="pro-pagesize">
                <Col :md="24" :lg="16">
                    <!-- <Button type="error" :disabled="tableaction" @click="tableDel" size="large" class="fl mr10 ">删除</Button> -->
                    <Button type="primary" :disabled="tableaction" @click="tableEdit" size="large" class="fl mr10">编辑</Button>
                    <!-- <Button type="success" :disabled="tableaction" size="large" class="fl mr10" @click="modalTrue">设置出单平台</Button> -->
                </Col>
                <Col :md="24" :lg="8" class="tRight">
                    <Page ref="pages" :current="currentpage" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { employeeGetList , employeeDel } from '../../api/employee'
import { getYunRankList } from '../../api/rank'
import { getDeptList } from '../../api/yun_dept'
import { getListByName } from '../../api/yun_org' 
import { formatTime } from '../../libs/time'
import debounce  from 'lodash.debounce'
import {get_online_by_yun,get_employee_online_list} from '../../api/org.js'

export default {
    data() {
        return {
            orglist:[],//model 出单平台列表
            roleList:[],
            loading: true,
            remoteloading:false,
            page: 1,
            pagesize: 10,
            listTotal:0,
            org:{
                    name:"",
                    online_id:"",//出单平台id
                    job_code:'',//工号
                    account:"",//账号
                    online_pwd:"",//密码
                },
            searchForm: {
                p: 1,
                pagesize: 10,
                name: '',
                job_code: '',
                sex: '',
                rank_id: '',
                dept_id: '',
                yun_org_mid:'',
                status:''
            },
            oname:'',
            deptlist:{},
            ranklist:{},
            proloading:false,
            comoptions:[],
            tableloading:true,
            tableaction:true,  
            current:0,
            currentpage:1,
            currentRow:{},
            columns1:[
                {
                    title: '工号',
                    key: 'job_code',
                    align: 'center',
                },
                {
                    title: '姓名',
                    key: 'name',
                    align:'center',                    
                },
                {
                    title: '性别',
                    key: 'sex',
                    align:'center',
                },
                {
                    title: '手机号',
                    key: 'mobile',
                    align:'center'
                },
                {
                    title: '部门',
                    key: 'dept_name',
                    align:'center'
                },
                {
                    title: '职级',
                    key: 'rank_name',
                    align:'center'
                }
            ],
            tablelist:[

            ],
            ruleValidate: {                
                underwrite_datetime: [
                    { required: true, type: 'date', message: '请选择承保时间', trigger: 'change' }
                ],              
            },        
        }
    },
    components: {
        productTitle
    },
    computed: {
        slidetoggle(){
            return this.$store.state.sildeshow
        },
    },
    mounted () {
        this.getDept();
        this.getRank();
        this.getList();
        // this.getcate();
    },
    methods: {
        // 点击设置显示模态框,带参数跳转详情
        modalTrue(){
                var  _params = {
                    eid:this.currentRow.id
                }
                console.log(_params,"..")
                new Promise((resolve, reject) => {
                    get_employee_online_list(_params).then(res => {
                        if (res.data.err == 0) {
                            this.$store.state.solid = "youzhi"
                            this.$router.push({ name: 'employee_update' ,params:{id:this.currentRow.id}});
                        } else if(res.data.err ==1400){
                            this.$store.state.solid = "youzhi"
                            this.$router.push({ name: 'employee_update' ,params:{id:this.currentRow.id}});
                        }else{
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
        },







        
        orgchange(value){
            this.oname = value.label
        },
        oidremote(query){
            if (query !== '') {
                if(query == this.oname){
                    this.searchForm.yun_org_mid = ''
                    return
                }
                this.remoteloading = true;
                this.remoteorg(query)               
            } else {
                this.orglist = [];
            }
        },
        remoteorg:debounce(function (query) { 
            
            new Promise((resolve, reject) => {
            let _params = {
                name:query
            }
            getListByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        // this.emplist = response.data.data 
                        this.remoteloading = false;                      
                        const list = response.data.data.map(item => {
                        return {
                                value: item.id,
                                label: item.shortn
                            };
                        });
                        this.orglist = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },300),
        getDept(){          
            new Promise((resolve,reject)=>{
                getDeptList().then(response => {
                    console.log(response)
                    if(response.data.err == 0){
                        this.deptlist = Object.assign({},response.data.data)
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            })
        },
        getRank(){           
            new Promise((resolve,reject)=>{
                getYunRankList().then(response => {
                    console.log(response)
                    if(response.data.err == 0){
                        this.ranklist = Object.assign({},response.data.data)
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            })
        },
        toUpdate(id){
            this.$router.push({ name: 'employee_update' ,params:{id:id}});            
        },
        //编辑保单
        tableEdit(){
            console.log(this.currentRow,"this.currentRow.........");
            this.$store.state.solid = "you"
            this.toUpdate(this.currentRow.id)
        },
        //搜索保险公司change事件
        companychange(item){
            //console.log(item)
            this.searchForm.cid  = item
        },
        //远程请求保险公司
        remoteCom(query){
            if (query !== '') {
                this.proloading = true;
                setTimeout(() => {                    
                    new Promise((resolve, reject) => {
                        let _params = {
                            name:query,
                        }
                        parteGetByName(_params).then(response => {
                            console.log(response.data)
                            if (response.data.err == 0){
                                 this.proloading = false;
                                const list = response.data.data.map(item => {
                                    return {
                                        value: item.id,
                                        label: item.name,
                                        pay_period:item.pay_period,
                                        period:item.period
                                    };
                                });
                                this.comoptions = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);                   
                            } else {
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });                   
                }, 200);
            } else {
                this.comoptions = [];
            }
        },       
        //时间转换
        datachange(date,obj,param){
            obj[param] = date
        },
        headSet(){

        },
        tableCurrentChange(currentRow,oldCurrentRow){
            this.tableaction = false;
            this.currentRow = currentRow
            console.log(this.currentRow,".......this.currentRow")
        },
        // 搜索
        search() {
            this.tableloading = true
            this.searchForm.p = 1
            this.getList(-1);
        },
        // 获取员工列表
        getList(id) {
            this.tableaction = true;           
            new Promise((resolve, reject) => {
                employeeGetList(this.searchForm).then(response => {
                    if (response.data.err == 0) {
                        this.tablelist = response.data.data.list;
                        this.listTotal = response.data.data.total;
                        this.tableloading = false;
                        if(id== -1){
                            // this.$refs['pages'].currentPage = 1
                            this.$refs.pages.currentPage = 1
                        }
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 页码改变
        pageChange(page) {
            this.page = page
            this.searchForm.p = page
            this.getList()
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.searchForm.pagesize = pagesize
            this.getList();
        },
        del(param) {
            new Promise((resolve, reject) => {
                employeeDel(param).then(response => {
                    if (response.data.err == 0) {
                        this.pageChange(1)
                        this.$Message.success(response.data.info);  
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //添加or编辑代理人，打开modal
        createBtn() {
            this.$router.push({ name: 'employee_create' });
        },
        // 删除时弹出对话框
        tableDel() {
            this.$Modal.confirm({
                title: '提示',
                content: '是否要删除该员工?',
                onOk: () => {
                    let _params = {
                        'id': this.currentRow.id
                    }
                    this.del(_params);
                },
            });
        },
    }
}
</script>
